<template>
	<view :class="['cs-open', is_top ? 'tp40' : 'btm40']">
		<view class="cs-open-pen" @click="changeOpen('pen')">笔</view>
		<view class="cs-open-hand" @click="changeOpen('hand')">手</view>
	</view>
</template>

<script>
	export default {
		props: {
			is_top: { // 位置的摆放
				type: Boolean,
				default: true
			}
		},
		methods: {
			changeOpen(stats) {
				this.$emit('changeOpen', stats)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 笔 / 手
	.cs-open{
		position: fixed;
		right: 0;
		margin-right: 20upx;
		z-index: 1;
	}
	/* #ifdef H5 */
	.tp40 {
		top: 92upx;
	}
	/* #endif */
	/* #ifdef APP-PLUS */
	.tp40 {
		top: 12upx;
	}
	/* #endif */
	.btm40 {
		bottom: 110upx;
	}
	
	.cs-open-pen, 
	.cs-open-hand{
		display: inline-block;
		width: 100upx;
		margin-left: 20upx;
		line-height: 100upx;
		font-size: 40upx;
		text-align: center;
		color: #fff;
		box-shadow:0px 2px 5px rgba(0,117,89,0.2);
		border-radius: 50%;
		background: #FF9900;
	}
</style>
